<template>
  <div class="row">
    <div class="card" v-for="item in arrList  " :key="item.id">
      <a :href="item.html_url" target="_blank">
        <img :src="item.avatar_url" style='width: 100px' />
      </a>
      <p class="card-text">{{ item.login }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'List',
  data() {
    return {
      arrList: [],
    }
  },
  methods: {
    getVal(Value) {
      // console.log(Value);
      this.arrList = Value
    }
  },

  mounted() {
    this.$bus.$on('sendVal', this.getVal)
  },
  beforeDestroy() {
    this.$bus.$off('sendVal')
  }
}
</script>

<style scoped>
.card {
  float: left;
  width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card>img {
  margin-bottom: .75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}
</style>